<style scoped>

.extendGroup {
  float: right;
  margin-right: 20px;
  opacity: 0;
}

.el-tree-node__content:hover .extendGroup {
  opacity: 1;
}

</style>

<template>
  <div>
      <template v-if="routerPath=='usergroup'" >
          <div v-loading="loading">
            <!-- 操作 -->
            <!--工具条-->
            <el-col :span="24" class="toolbar table_toolbar" style="padding-bottom: 0px;">
              <el-form :inline="true" :model="filters">
                <el-form-item class="table_input">
                  <el-input v-model="filters.name" placeholder="输入用户组名称/用户组描述检索"></el-input>
                </el-form-item>
                <el-form-item class="table_i">
                  <el-button type="primary" v-on:click="fetchData"><i class="el-icon-search"></i></el-button>
                </el-form-item>
                <el-form-item class="table_btn_r" >
                  <el-button class="table_btn_r" type="primary" v-has="[usergroup.add]" @click="handleAdd">添加组</el-button>
                </el-form-item>
              </el-form>
            </el-col>
            <div class="operation">
        <!--       <el-button size="small" type="primary" v-has="[role.request]" @click="fetchData">查询</el-button>
              <el-button size="small" type="danger" v-has="[role.remove]">删除</el-button>
              <el-button size="small" v-if="$_has([role.request]) && canReset">重置</el-button>
              <el-button size="small" type="info" @click="requestNotAllowed">尝试发起越权请求</el-button> -->

            </div>
            <!-- table start  -->
            <el-table :data="list" border style="width: 100%">
              <el-table-column prop="groupName" label="用户组名称" width="220">
              </el-table-column>
              <el-table-column prop="userCount" label="用户成员数量" width="220">
                <template slot-scope="scope">
                  <span class="span_btn" @click="goToUsers(scope.$index, scope.row)">{{scope.row.userCount}}</span>
                </template>
              </el-table-column>
              <el-table-column prop="groupDesc" label="用户组描述">
              </el-table-column>
             
              <el-table-column label="操作" width="320" align="center">
                <template slot-scope="scope">
                <!--   <el-button size="mini" type="info">编辑</el-button>
                  <el-button size="mini" type="danger">删除</el-button> -->
                  <span class="span_btn" v-if="isReleUser"  @click="releUsers(scope.$index, scope.row)" >关联用户</span>
                  <span class="span_line" v-if="isReleUser && isReleRole">|</span>
                  <span class="span_btn" v-if="isReleRole"   @click="releRole(scope.$index, scope.row)">关联角色</span>
                  <span class="span_line" v-if="isReleRole && isEdit">|</span>
                  <span class="span_btn" v-if="isEdit"  @click="handleEdit(scope.$index, scope.row)">编辑</span>
                  <span class="span_line" v-if="isEdit && isDel">|</span>
                  <span class="span_btn span_btn_del" v-if="isDel"  @click="handleDel(scope.$index, scope.row)" >删除</span>

                </template>
              </el-table-column>
            </el-table>
            <!-- table end  -->
            <!-- 新增页面 -->
             <el-dialog title="添加用户组" class="form_part form_part_roles" :visible.sync="addFormVisible"  :close-on-click-modal="false">
              <el-form :model="addForm" label-width="83px" :rules="addFormRules" ref="addForm">
                  <el-form-item label="用户组名:" prop="groupName">
                    <el-input v-model="addForm.groupName" auto-complete="off" max="15"></el-input>
                  </el-form-item>
                  
                  <el-form-item label="描述:" prop="groupDesc">
                    <el-input type="textarea" v-model="addForm.groupDesc" placeholder="描述"></el-input>
                  </el-form-item>

              </el-form>
              <div slot="footer" class="dialog-footer">
                <!-- <el-button @click.native="addFormVisible = false">取消</el-button> -->
                <el-button type="primary" @click.native="addSubmit" :loading="addLoading">保存</el-button>
              </div>
            </el-dialog>
            <!-- 编辑页面 -->
             <el-dialog title="添加用户组" class="form_part form_part_roles" :visible.sync="editFormVisible"  :close-on-click-modal="false">
              <el-form :model="editForm" label-width="83px" :rules="addFormRules" ref="editForm">
                  <el-form-item label="用户组名:" prop="groupName">
                    <el-input v-model="editForm.groupName" auto-complete="off"></el-input>
                  </el-form-item>
                  
                  <el-form-item label="描述:" prop="groupDesc">
                    <el-input type="textarea" v-model="editForm.groupDesc" placeholder="描述"></el-input>
                  </el-form-item>

              </el-form>
              <div slot="footer" class="dialog-footer">
                <!-- <el-button @click.native="addFormVisible = false">取消</el-button> -->
                <el-button type="primary" @click.native="editSubmit('editForm')" :loading="editLoading">保存</el-button>
              </div>
            </el-dialog>

          </div>
      </template>
       <template v-else>
        <router-view></router-view>
      </template>
  </div>
  
</template>

<script>
import * as usergroup from '../api/usergroup';

let myMixin = {
  data: function() {
    return { usergroup }
  }
}

export default {
  mixins: [myMixin],
  data() {
    return {
      isReleUser:true,
      isReleRole:true,
      isEdit:true,
      isDel:true,
      routerPath:'',
      filters:{name:''},//搜索表单
      addFormVisible:false,//新增页面是否显示
      editFormVisible:false,//编辑页面是否显示
      addForm:{sex:1},//新增页面数据
      editForm:{},//编辑页面数据
      addFormRules:{
        groupName: [
            { required: true, message: '请输入姓名', trigger: 'blur' }
          ],
        groupDesc: [
          { required: true, message: '请输入描述', trigger: 'blur' }
        ]
      },
      editFormRules:{
        groupName: [
            { required: true, message: '请输入姓名', trigger: 'blur' }
          ],
        groupDesc: [
          { required: true, message: '请输入描述', trigger: 'blur' }
        ]
      },
      addLoading:false,//
      editLoading:false,
      list: [],
      canReset: true,
      loading: false,
      groupId:''
    }
  },
  methods: {
    goToUsers(index,row){
      //根据用户组id查看用户列表
       this.$router.push({path:'/authlist/users',query: {groupId: row.groupId}})

    },
     releUsers(index,row){
      //关联用户
       this.routerPath='releusers';
       this.$router.push({path:'/authlist/usergroup/releusers',query: {groupId: row.groupId}})

    },
    releRole(index,row){
      //关联角色
      this.routerPath='releroles';
       this.$router.push({path:'/authlist/usergroup/releroles',query: {groupId: row.groupId}})

    },
   //显示编辑界面
    handleEdit: function (index, row) {
      this.editFormVisible = true;
      this.groupId=row.groupId;
        let para={
        groupId:row.groupId
       }
        usergroup.info.r(para).then((res) => {
          if(res.data.retCode==1){
              this.editForm=res.data.data;
          }else{
            this.$message(res.data.retMsg);
          }              
      })
    },

    //显示新增界面
    handleAdd: function () {
      // this.$router.push({path:"/add"});
     this.addFormVisible = true;
    
    },
   addSubmit:function(){
    //新增数据提交
      this.$refs.addForm.validate((valid) => {
        if (valid) {
           let para = {
            groupName :this.addForm.groupName ,
            groupDesc :this.addForm.groupDesc
          };
          // console.log(qs.stringify(para));
          // return;
          usergroup.add.r(para).then((res) => {
            if(res.data.retCode==1){
              //添加用户成功
              this.addFormVisible = false;
              this.$message('添加成功')
              this.fetchData();
            }else{
              this.$message(res.data.retMsg);
            }
            
          });
        }else{
          console.log('error submit!!');
          return false;
        }
      })

    },
    editSubmit:function(){
      //编辑数据提交
      this.$refs.editForm.validate((valid) => {
          if (valid) {
             let para = {
              groupId:this.groupId,
              groupName:this.editForm.groupName,
              groupDesc:this.editForm.groupDesc           
            };
            // console.log(qs.stringify(para));
            // return;
            usergroup.modify.r(para).then((res) => {
              if(res.data.retCode==1){
                //编辑用户成功
                this.editFormVisible = false;
                this.$message('编辑成功');

                this.fetchData();
              }else{
                this.$message(res.data.retMsg);
              }
              
            });
          }else{
            console.log('error submit!!');
            return false;
          }
      })
    },
    //删除
    handleDel: function (index, row) {
      this.$confirm('确认删除该记录吗?', '提示', {
        type: 'warning'
      }).then(() => {
        this.listLoading = true;
        //NProgress.start();
        let para = { id: row.groupId };
        usergroup.remove.r(para).then((res) => {
            if(res.data.retCode==1){
              //删除成功
              this.$message('删除成功');


              this.fetchData();
            }else{
              this.$message(res.data.retMsg);
            }
            
        });
        
      }).catch(() => {

      });
    },
    fetchData(init) {
      if(!this.$_has([usergroup.request])){
        this.$message("暂无权限");
        this.loading = false;

        return;
      }
       let para = {
        /*  showCount:this.showCount,
          currentPage:this.page,//当前查询页*/
          keyword:this.filters.name
        };
      usergroup.request.r(para).then((res) => {
        this.total=res.data.data.totalRow;
        this.list = res.data.data;
        this.loading = false;
      })
    },
    requestNotAllowed: function(){
      usergroup.notAllowed.r();
    }
  },
  watch: {
    // 如果路由有变化，会再次执行该方法
    "$route": function(){
      this.routerPath=this.$route.path.split("/").pop();
    }
  },
  created() {
    this.isReleUser=this.$_has([usergroup.releUserGroup]);
    this.isReleRole=this.$_has([usergroup.releroleGroup]);
    this.isEdit=this.$_has([usergroup.modify]);
    this.isDel=this.$_has([usergroup.remove]);

    this.fetchData(true)
    this.routerPath=this.$route.path.split("/").pop();

  }
}
</script>